<script setup>
import { ref, defineEmits, watch } from 'vue';
import axios from 'axios';

const emit = defineEmits(['login-success']);

const key = ref('rq');
const model_type = ref(localStorage.getItem('model_type') || 'qwen-plus');
const temperature = ref(parseFloat(localStorage.getItem('temperature')) || 1.3);
const errorMessage = ref('');
const toolcall = ref(false);
const use_toolcall_prompt = ref(true);

const login = async () => {
  try {
    const response = await axios.post(`${import.meta.env.VITE_API_URL}/login`, {
      key: key.value,
      model_type: model_type.value,
      temp: temperature.value,
      toolcall: toolcall.value
    });
    if (response.data.session) {
      // Handle successful login, e.g., store session data
      console.log('Login successful:', response.data);
      // emit session id to app
      emit('login-success', response.data.session, toolcall.value && use_toolcall_prompt.value);
    } else {
      errorMessage.value = 'Login failed. Please check your key.';
    }
  } catch (error) {
    console.error('Error during login:', error);
    errorMessage.value = '出现了某些故障';
  }
};

// Save model_type and temperature to localStorage whenever they change
watch(model_type, (newModelType) => {
  localStorage.setItem('model_type', newModelType);
});

watch(temperature, (newTemperature) => {
  localStorage.setItem('temperature', newTemperature);
});

</script>

<template>
  <div class="overlay">
    <div class="login-form">
      <h2>开始</h2>
      <select v-model="model_type">
        <option value="deepseek-v3">DeepSeek V3</option>
        <option value="deepseek-r1">DeepSeek R1</option>
        <option value="qwen-plus">Qwen (Plus)</option>
        <option value="qwen-turbo">Qwen (Turbo)</option>
        <option value="qwq-plus">QwQ (Plus)</option>
        <option value="qwq-32b">QwQ (32B开源版)</option>
      </select>
      <p v-if="model_type=='deepseek-r1'||model_type=='qwq-plus'||model_type=='qwq-32b'" style="color:sandybrown;">
        你选择的模型需要思维链推理
        <br />
        响应速度慢是正常现象
      </p>
      <div class="temperature-settings">
      <label for="temperature">温度: {{ temperature }}</label>
      <input type="range" id="temperature" v-model="temperature" min="0.2" max="1.7" step="0.01" />
      </div>
      <div>
      <span v-if="['qwen-plus', 'qwen-turbo'].includes(model_type)"> 工具调用（实验性功能）<input type="checkbox" id="toolcall" v-model="toolcall" /> </span>
      </div>
      <div>
      <span v-if="toolcall"> 使用工具调用提示词 <input type="checkbox" id="use_toolcall_prompt" v-model="use_toolcall_prompt" /> </span>
      </div>
      <button class="login-button" @click="login">启动</button>
      <p style="color:gray;">出问题了就在群里找Hineven</p>
      <p class="error-message" v-if="errorMessage">{{ errorMessage }}</p>
    </div>
  </div>
</template>

<style scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-form {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 300px;
}

.login-form h2 {
  margin-bottom: 20px;
  font-family: 'Arial', sans-serif;
}

.login-form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: 'Arial', sans-serif;
}

.login-form .login-button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #0056b3;
  margin-top: 10px;
  margin-bottom: 10px;
  color: white;
  cursor: pointer;
  font-family: 'Arial', sans-serif;
}

.login-form button:hover {
  background-color: #004494;
}

.login-form p {
  color: red;
  font-family: 'Arial', sans-serif;
}

.temperature-settings {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.temperature-settings input {
  width: 60%;
}

.error-message {
  color:red;
}
</style>